<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="iconfont/iconfont.css" />
    <link rel="stylesheet" href="less/style.css" />
  </head>
  <body>
    <div class="com-header-area">
      <div class="search-box">
        <span class="iconfont icon-sousuo"></span>
        <input type="text" placeholder="书名、作者、出版社、ISBN、文具" />
      </div>
    </div>
    <div class="com-content">
      <ul class="hot-search">
        <li class="hot">热门搜索：</li>
        <li><a href="#">高等数学</a></li>
        <li><a href="#">高等数学</a></li>
        <li><a href="#">高等数学</a></li>
        <li><a href="#">高等数学</a></li>
      </ul>
      <div class="slide">
        <img src="img/slide.jpg" alt="" />
      </div>

      <div class="guarantee-g">
        <span class="guarantee-span"><span class="check">√</span>保证正品</span>
        <span class="guarantee-span"><span class="check">√</span>保证低价</span>
        <span class="guarantee-span"
          ><span class="check">√</span>24小时发货</span
        >
        <span class="guarantee-span"
          ><span class="check">√</span>无理由退货</span
        >
      </div>

      <div class="tab">
        <a href="#"><img src="img/classify.jpg" />分类搜索</a>
        <a href="#"><img src="img/classify.jpg" />分类搜索</a>
        <a href="#"><img src="img/classify.jpg" />分类搜索</a>
        <a href="#"><img src="img/classify.jpg" />分类搜索</a>
        <a href="#"><img src="img/classify.jpg" />分类搜索</a>
      </div>

      <div class="bookList">
        <div class="ad">
          <a href="#">
            <img src="img/ico_index.gif" alt="" />
          </a>
        </div>
        <div class="book-items">
          <div class="item">
            <span class="book-recommend">推荐图书</span>
            <span class="left-arrow">您喜欢的都在这里</span>
            <a class="span-more">更多</a>
          </div>
          <div class="list-recommend">
            <ul>
              <li>
                <a href="#">
                  <img src="img/book.jpg" alt="" />
                </a>
                <div class="bookName">
                  阿弥陀佛么么哒
                </div>
                <div class="price">
                  <span>有路价 ￥15.00</span>
                </div>
                <div class="priceVip">
                  <span>VIP价 ￥14.30</span>
                </div>
              </li>
              <li>
                <a href="#">
                  <img src="img/book.jpg" alt="" />
                </a>
                <div class="bookName">
                  阿弥陀佛么么哒
                </div>
                <div class="price">
                  <span>有路价 ￥15.00</span>
                </div>
                <div class="priceVip">
                  <span>VIP价 ￥14.30</span>
                </div>
              </li>
              <li>
                <a href="#">
                  <img src="img/book.jpg" alt="" />
                </a>
                <div class="bookName">
                  阿弥陀佛么么哒
                </div>
                <div class="price">
                  <span>有路价 ￥15.00</span>
                </div>
                <div class="priceVip">
                  <span>VIP价 ￥14.30</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="book-refresh">
            <a href="#">
              <span>换一换</span>
            </a>
          </div>
        </div>

        <div class="book-items">
          <div class="item">
            <span class="book-recommend">特色教材</span>
            <span class="left-arrow">大学里受欢迎的书</span>
          </div>
          <div class="bookInfo">
            <ul>
              <li class="bi_li">
                <div class="bi-l">
                  <img src="img/car.jpg" alt="" />
                </div>
                <div class="bi-r">
                  <a href="/#">
                    <div class="name">汽车理论(第5版)</div>
                  </a>
                  <div class="author">余志生</div>
                  <div class="price">
                    <span>有路价：</span>
                    <span>￥14.00</span>
                    <span>39折</span>
                  </div>
                  <div class="price priceVip">
                    <span>VIP 价：</span>
                    <span class="Vip">
                      ￥13.30
                    </span>
                    <span>37折</span>
                  </div>
                  <div class="price">
                    <span>团购价：</span>
                    <span>
                      ￥11.20
                    </span>
                    <span>31折</span>
                  </div>
                </div>
              </li>
              <li class="bi_li">
                <div class="bi-l">
                  <img src="img/car.jpg" alt="" />
                </div>
                <div class="bi-r">
                  <a href="/#">
                    <div class="name">汽车理论(第5版)</div>
                  </a>
                  <div class="author">余志生</div>
                  <div class="price">
                    <span>有路价：</span>
                    <span>￥14.00</span>
                    <span>39折</span>
                  </div>
                  <div class="price priceVip">
                    <span>VIP 价：</span>
                    <span class="Vip">
                      ￥13.30
                    </span>
                    <span>37折</span>
                  </div>
                  <div class="price">
                    <span>团购价：</span>
                    <span>
                      ￥11.20
                    </span>
                    <span>31折</span>
                  </div>
                </div>
              </li>
              <li class="bi_li">
                <div class="bi-l">
                  <img src="img/car.jpg" alt="" />
                </div>
                <div class="bi-r">
                  <a href="/#">
                    <div class="name">汽车理论(第5版)</div>
                  </a>
                  <div class="author">余志生</div>
                  <div class="price">
                    <span>有路价：</span>
                    <span>￥14.00</span>
                    <span>39折</span>
                  </div>
                  <div class="price priceVip">
                    <span>VIP 价：</span>
                    <span class="Vip">
                      ￥13.30
                    </span>
                    <span>37折</span>
                  </div>
                  <div class="price">
                    <span>团购价：</span>
                    <span>
                      ￥11.20
                    </span>
                    <span>31折</span>
                  </div>
                </div>
              </li>
              <li class="bi_li">
                <div class="bi-l">
                  <img src="img/car.jpg" alt="" />
                </div>
                <div class="bi-r">
                  <a href="/#">
                    <div class="name">汽车理论(第5版)</div>
                  </a>
                  <div class="author">余志生</div>
                  <div class="price">
                    <span>有路价：</span>
                    <span>￥14.00</span>
                    <span>39折</span>
                  </div>
                  <div class="price priceVip">
                    <span>VIP 价：</span>
                    <span class="Vip">
                      ￥13.30
                    </span>
                    <span>37折</span>
                  </div>
                  <div class="price">
                    <span>团购价：</span>
                    <span>
                      ￥11.20
                    </span>
                    <span>31折</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="footer_nav">
      <div class="footer-tab">
        <a href="#"><i class="iconfont icon-sousuo"></i>首页</a>
        <a href="#"><i class="iconfont icon-sousuo"></i>我要卖书</a>
        <a href="#"><i class="iconfont icon-sousuo"></i>购物车</a>
        <a href="#"><i class="iconfont icon-sousuo"></i>我的有路</a>
      </div>
    </div>
  </body>
</html>
